<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询页面</title>
</head>
<body>
<div>
    <button id="query">查询</button>
    <table width="600" border="1" cellspacing="0">
        <thead>
        <th>Id</th>
        <th>名字</th>
        <th>性别</th>
        <th>年龄</th>
        <th>大学</th>
        <th>城市</th>
        <th>学号</th>
        <th>操作</th>
        </thead>
        <tbody id="studentList">

        </tbody>
    </table>
    <div>
        <button onclick="pre()">&lt;</button>
        <span id="pageBtn">

    </span>
        <button onclick="next()">&gt;</button>
    </div>
</div>
<!--引入ajax文件，事先准备好的文件-->
<script src="ajax.js"></script>
<script src="common.js"></script>
<script>
    let queryDom=document.querySelector("#query");
    queryDom.addEventListener("click",function (e) {
        query();
    })
    let size=10;
    let page=1;
    let maxCount=0;
    function query() {
        function queryCallBack(data) {
            if(data.code=="200"){
                let pageBtnDom=document.querySelector("#pageBtn");
                removeAllChild(pageBtnDom);
                maxCount=data.data.count;
                for(let i=1;i<=Math.ceil(data.data.count/size);i++){
                    let btn=document.createElement("button");
                    btn.innerText=i;
                    btn.onclick=function (e) {
                        page=e.target.innerText;
                        let formData=new FormData();
                        formData.append("size",size);
                        formData.append("page",page);
                        ajax("/student/list.php","post",formData,queryCallBack);
                    };
                    pageBtn.append(btn);
                }
                let studentList = document.querySelector("#studentList");
                removeAllChild(studentList);
                for (let i = 0; i < data.data.list.length; i++) {
                    let student = data.data.list[i];

                    let tr = document.createElement("tr");

                    let td = document.createElement("td");
                    td.innerText = student.id;
                    tr.appendChild(td);

                    td = document.createElement("td");
                    td.innerText = student.name;
                    tr.appendChild(td);

                    td = document.createElement("td");
                    td.innerText = student.sex;
                    tr.appendChild(td);

                    td = document.createElement("td");
                    td.innerText = student.age;
                    tr.appendChild(td);

                    td = document.createElement("td");
                    td.innerText = student.edu;
                    tr.appendChild(td);

                    td = document.createElement("td");
                    td.innerText = student.city;
                    tr.appendChild(td);

                    td = document.createElement("td");
                    td.innerText = student.no;
                    tr.appendChild(td);


                    td = document.createElement("td");
                    let btn = document.createElement("button");
                    btn.innerText = "修改";
                    btn.onclick = function (e) {
                    };
                    td.appendChild(btn);
                    btn = document.createElement("button");
                    btn.innerText = "删除";
                    btn.onclick = function (e) {

                    };
                    td.appendChild(btn);
                    tr.appendChild(td);

                    studentList.appendChild(tr);
                }

            } else {
                alert(data.msg)
            }
        }

        let formData = new FormData();
        formData.append("size", size);
        formData.append("page", page);
        ajax("/student/list.php", "POST", formData, queryCallBack);
    }
    query();
    function pre() {
        page--;
        if (page < 1) {
            page = 1;
            return;
        }
        query();
    }

    //下页
    function next() {
        page++;
        if (page > Math.ceil(maxCount / size)) {
            page = Math.ceil(maxCount / size);
            return;
        }
        query();
    }
</script>
</body>
</html>